<template>
  <view class="login-container">
    <view class="logo">工单抢单系统</view>
    
    <!-- 微信登录 -->
    <view class="login-section">
      <button class="login-btn wechat-login" @click="handleWechatLogin">
        <image class="login-icon" src="/static/images/wechat.png" mode="aspectFit"></image>
        微信一键登录
      </button>
      <view class="login-tips">请使用微信客户端打开本系统</view>
    </view>
    
    <!-- 手机号登录 -->
    <view class="login-section phone-login-section">
      <view class="section-title">手机号登录</view>
      <input 
        class="phone-input" 
        type="number" 
        v-model="phone" 
        placeholder="请输入手机号"
        maxlength="11"
      />
      <button class="login-btn phone-login" @click="handlePhoneLogin" :disabled="isLoginLoading">
        {{ isLoginLoading ? '登录中...' : '手机号登录' }}
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { phoneLoginAPI } from '@/api/login.js'

// 手机号输入
const phone = ref('')
// 登录状态
const isLoginLoading = ref(false)

// 微信登录处理（静态页面，不实现实际登录逻辑）
const handleWechatLogin = () => {
  // 显示提示信息
  uni.showToast({ title: '登录功能暂未实现', icon: 'none' })
}

// 手机号登录处理
const handlePhoneLogin = async () => {
  // 基本验证
  if (!phone.value) {
    uni.showToast({ title: '请输入手机号', icon: 'none' })
    return
  }
  
  // 设置登录状态
  isLoginLoading.value = true
  
  try {
    // 调用后端API进行登录
    const res = await phoneLoginAPI(phone.value)
    
    if (res && res.code === 0) {
      // 登录成功
      // 保存用户信息到本地存储
      const userInfo = {
        id: res.data.id || 'user_' + new Date().getTime(),
        phone: phone.value,
        customerName: res.data.customerName || res.data.name || phone.value.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'), // 脱敏处理
        name: res.data.customerName || res.data.name,
        loginType: 'phone',
        ...res.data // 保存所有返回的用户信息
      }
      
      try {
        uni.setStorageSync('userInfo', userInfo)
        uni.showToast({ title: '登录成功', icon: 'success' })
        
        // 跳转到订单页面（原抢单大厅页面已删除）
        setTimeout(() => {
          uni.switchTab({ url: '/pages/orders/orders' })
        }, 1500)
      } catch (e) {
        console.error('保存用户信息失败:', e)
        uni.showToast({ title: '登录失败', icon: 'none' })
      }
    } else {
      // 登录失败
      uni.showToast({ title: res?.msg || '登录失败', icon: 'none' })
    }
  } catch (e) {
    console.error('登录请求失败:', e)
    uni.showToast({ title: '登录请求失败', icon: 'none' })
  } finally {
    isLoginLoading.value = false
  }
}
</script>

<!-- 3. 声明 lang="scss"，确保 SCSS 变量能正常解析 -->
<style lang="scss">
.login-container {
  padding: 50rpx 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: $uni-bg-color-grey; // 使用 SCSS 全局背景色
  min-height: 100vh; // 全屏背景，避免底部留白
  box-sizing: border-box;
}

.logo {
  font-size: 36rpx;
  color: $uni-color-primary; // 主题蓝
  margin-bottom: 80rpx;
  font-weight: 600;
}

.login-section {
  width: 100%;
  text-align: center;
  margin-bottom: 60rpx;
}

.section-title {
  font-size: $uni-font-size-base;
  color: $uni-text-color;
  margin-bottom: 30rpx;
  text-align: left;
  padding-left: 10%;
}

.login-btn {
  width: 80%;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: $uni-border-radius-base; // 全局圆角
  margin: 0 auto 20rpx;
  font-size: $uni-font-size-base;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.wechat-login {
  background-color: #07c160; // 微信绿色
  color: $uni-text-color-inverse; // 白色文字
}

.phone-login {
  background-color: $uni-color-primary; // 主题蓝
  color: $uni-text-color-inverse; // 白色文字
}

.login-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.login-tips {
  margin-top: 30rpx;
  font-size: $uni-font-size-sm;
  color: $uni-text-color-grey;
}

.phone-input {
  width: 80%;
  height: 80rpx;
  padding: 0 20rpx;
  margin: 0 auto 30rpx;
  border: 1rpx solid $uni-border-color;
  border-radius: $uni-border-radius-base;
  font-size: $uni-font-size-base;
  box-sizing: border-box;
}

.phone-login-section {
  margin-top: 40rpx;
}
</style>
